import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableNativeFeedback,
} from 'react-native';

/**
 * 普通数据行
 * "l": 键MC,
 * "n": 键DM,
 * "v": 1969-11-02,
 */
export default class NormalLine extends Component {
    render() {
        return (
            <TouchableNativeFeedback
                style={{flexDirection: 'row'}}
                background={TouchableNativeFeedback.SelectableBackground()}>
                <View style={{flexDirection: 'row'}}>
                    <View style={styles.title}>
                        <Text style={styles.titleText}>{this.props.item.l}</Text>
                    </View>
                    <View style={styles.value}>
                        <Text style={styles.valueText}>{this.props.item.v}</Text>
                        <View style={styles.underLine}/>
                    </View>
                </View>
            </TouchableNativeFeedback>
        );
    }
}

//样式定义
const styles = StyleSheet.create({
    flexTop:{
        flex: 8,
        flexDirection:'row',
        height:30,
    },
    title:{
        flex: 1,
    },
    value:{
        flex: 3,
        paddingRight: 2,
    },
    titleText:{
        color: '#494949',
        padding: 4,
    },
    valueText:{
        color: '#000000',
        justifyContent: 'center',
        padding: 4,
        fontSize: 16,
    },
    underLine:{
        height: 1,
        backgroundColor: '#adadad',
        alignSelf: 'stretch',
        justifyContent: 'flex-end'
    },
});